<template>
  <div id="aside">
    <ul>
      <li
        v-for="(list, id) of lists"
        :key="id"
        @click="sendRoutingPop(list.name)"
      >
        {{ list.listshow }}
      </li>
    </ul>
    <div class="content">
      <div class="card">
        创建的歌单<i
          class="icon-qianjin"
          v-show="!xiala1"
          @click="zhankai1"
        ></i>
        <i class="icon-xiala" v-show="xiala1" @click="huishou1"></i>
      </div>
      <ul v-show="xiala1">
        <li
          v-for="(i, index) of mysongslist"
          :key="index"
          @click="tolisting(i.id,true)"
        >
          <i class="icon-xihuan" v-show="index == 0"></i>
          <i
            class="icon-yinleliebiao"
            v-show="index !== 0 && i.privacy == 0"
          ></i>
          <i class="icon-simi" v-show="i.privacy == 10"></i>{{ i.name }}
        </li>
      </ul>

      <div class="card">
        收藏的歌单<i
          class="icon-qianjin"
          v-show="!xiala2"
          @click="zhankai2"
        ></i>
        <i class="icon-xiala" v-show="xiala2" @click="huishou2"></i>
      </div>
      <ul v-show="xiala2">
        <li v-for="(i, index) of collectlist" :key="index" @click="tolisting(i.id,true)">
          <i class="icon-yinleliebiao"></i>{{ i.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Aside",
  props: ["routingPop"],
  data() {
    return {
      lists: [
        {
          id: 1,
          name: "FindingMusic",
          listshow: "发现音乐",
          selected: false,
        },
        // {
        //   id: 2,
        //   name: "Video",
        //   listshow: "视频",
        //   selected: false,
        // },
        {
          id: 2,
          name: "Lately",
          listshow: "最近播放",
          selected: false,
        },
        // {
        //   id: 4,
        //   name: "FM",
        //   listshow: "每日FM",
        //   selected: false,
        // },
      ],

      mysongslist: [],
      collectlist: [],
      select: "clicked",

      xiala1: true,
      xiala2: true,
    };
  },
  methods: {
    //点击侧边栏触发自定义事件并传参，绑定在main组件中，用于切换main中显示的路由
    sendRoutingPop(name) {
      this.$bus.$emit("getRoutingPop", name);
      
    },

    huishou1() {
      this.xiala1 = false;
    },

    huishou2() {
      this.xiala2 = false;
    },

    zhankai1() {
      this.xiala1 = true;
    },

    zhankai2() {
      this.xiala2 = true;
    },

    tolisting(id,isRefresh) {
      this.$bus.$emit("ToListing", id,isRefresh);
    },

    // tolistingAndRefresh(id,isRefresh){
    //   confirm(id)
    //   confirm(isRefresh)
    //   this.$bus.$emit("ToListingAndRefresh", id,isRefresh);
    // },

    getUserList() {
      
      let userId = JSON.parse(localStorage.getItem("user")).id;

      const id = this.$store.state.userAbout.userInfo.id || userId
      axios
        .post(
          "http://localhost:8013/api/user/playlist?uid=" +
            id
        )
        .then((res) => {
          console.log(res.data.playlist);
          this.collectlist = res.data.playlist.filter((item, i) => {
            return item.subscribed;
          });
          this.mysongslist = res.data.playlist.filter((item, i) => {
            return !item.subscribed;
          });
        });
    },
  },
  mounted() {
    this.$bus.$on("updateAside", () => {
      this.getUserList();
    });

    this.getUserList();
  },
};
</script>

<style scoped>
#aside {
  padding-bottom: 80px;
}
#aside ul li {
  letter-spacing: 1px;
  height: 40px;
  line-height: 40px;
  margin: 0px 4px 2px 2px;
  text-align: left;
  padding-left: 10px;
  font-size: 15px;
}
#aside ul li:hover {
  background: #fafafa;
}
#aside .content .card {
  color: #aaa;
  font-size: 12px;
  text-align: left;
  padding-left: 10px;
  margin-top: 20px;
  height: 30px;
  line-height: 30px;
}
#aside .content .card i {
  color: #bbb;
  font-size: 11px;
}
#aside .content li {
  height: 40px;
  line-height: 40px;
  line-height: 40px;
  overflow: hidden;
}
#aside .content li i{
	margin-right: 5px;
}
</style>